<template>
  <div class="detail" v-if="detail.goods_info">
    <div class="fixTop" v-if="!iswait">
      <div class="ft-item" @click="flag = 0" :class="{ active: flag == 0 }">
        <div>商品</div>
      </div>
      <div class="ft-item" @click="flag = 1" :class="{ active: flag == 1 }">
        <div>评价</div>
      </div>
      <div class="ft-item" @click="flag = 2" :class="{ active: flag == 2 }">
        <div>推荐</div>
      </div>
      <div class="ft-item" @click="flag = 3" :class="{ active: flag == 3 }">
        <div>详情</div>
      </div>
    </div>
    <div class="d-top" v-if="!iswait">
      <div class="img">
        <div class="bigBox" ref="box">
          <wc-swiper v-if="detail.goods_info.slider_image" :autoplay="false">
            <wc-slide
              v-for="(item, index) in detail.goods_info.slider_image"
              :key="index"
            >
              <a href="#/home/banner"><img :src="item" alt="" /></a>
            </wc-slide>
          </wc-swiper>
        </div>
      </div>
      <div class="text">
        <div class="t-price">
          <span class="pp-price">¥{{ detail.goods_info.price }}</span>
          <span class="vip-price">¥1{{ detail.goods_info.vip_price }}</span>
          <img
            src=""
            alt=""
          />
        </div>
        <div class="t-title">
          {{ detail.goods_info.store_name }}
        </div>
        <div class="t-description">
          <div class="d-price">原价：¥{{ detail.goods_info.price }}</div>
          <div>
            库存：{{ detail.goods_info.stock }}{{ detail.goods_info.unit_name }}
          </div>
          <div>
            销量：{{ detail.goods_info.sales }}{{ detail.goods_info.unit_name }}
          </div>
        </div>
      </div>
    </div>
    <div class="common" v-if="!iswait">
      <div class="text">用户评价(0)</div>
      <router-link to="/home/common">
        <div class="c-go">
          <span class="c-n">0%</span>
          <span class="c-g">好评率</span>
          <span class="bi bi-chevron-compact-right"></span>
        </div>
      </router-link>
    </div>
    <div class="recommand" v-if="!iswait">
      <div class="r-title">优品推荐</div>
        <div class="r-content">
          <div class="c-item" v-for="(item,index) in detail.goods_list" v-bind:key="item.id">
                <a @click="go()" v-if="index<12">
                    <router-link :to="{path : '/home/detail', query : {id : item.id}}">
                        <div class="c-item-img">
                          <img
                            :src="item.image"
                            alt=""
                          />
                        </div>
                        <div class="c-item-title">
                          {{item.store_name}}
                        </div>
                        <div class="c-item-price">¥{{item.price}}</div>
                  </router-link>
              </a>
          </div>
        </div>
    </div>
    <div class="productDetail" v-if="!iswait">
      <div class="title">产品介绍</div>
      <!-- {{detail.goods_info.description}} -->
      <div class="text">
        <!-- <p>证书编号：2018011606102550</p> -->
        <!-- <p>证书状态：有效</p>
        <p>产品名称：TD-LTE 数字移动电话机</p>
        <p>3C规格型号：A2108(电源适配器可选：A1443 输出：5.0VDC 1A)</p>
        <p>产品名称：Apple/苹果 iPhone 12</p>
        <p>Apple型号: iPhone 12</p>
        <p>机身颜色: 红色 白色 黑色 蓝色 绿色 紫色</p>
        <p>运行内存RAM: 4GB</p>
        <p>存储容量: 64GB 128GB 256GB</p>
        <p>网络模式: 双卡双待</p> -->
      </div>
      <!-- <div class="img">
        <div class="img-first">
          <img
            src="https://gdp.alicdn.com/imgextra/i4/2024314280/O1CN01Esdd521hUHqY3nCPg_!!2024314280.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            src="https://gdp.alicdn.com/imgextra/i3/2024314280/O1CN01ThfpvW1hUHpgSYs0r_!!2024314280.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            src="https://gdp.alicdn.com/imgextra/i4/2024314280/O1CN01bvYT101hUHlZygvTl_!!2024314280.jpg"
            alt=""
          />
        </div>
      </div>
      <div class="endText">
        <span
          >当天18点前成功付款订单99%现货当天发，最晚在天猫规定时间内发出</span
        >
      </div> -->
    </div>
    <div class="fixBottom" v-if="!iswait">
      <div class="fb-left">
        <div class="l-box collect" @click="collect">
          <div class="l-box-img">
            <span class="iconfont icon-shoucang" v-if="!iscollect"></span>
            <img src="../../assets/img/collect.png" alt="" v-if="iscollect" />
          </div>
          <div class="l-box-text">
            <span>收藏</span>
          </div>
        </div>
        <div class="l-box cart">
          <div class="l-box-img">
            <span class="iconfont icon-gouwuchekong"></span>
          </div>
          <router-link to="/cart">
            <div class="l-box-text">
              <span>购物车</span>
            </div>
          </router-link>
        </div>
      </div>
      <div class="fb-right">
        <div class="r-box r-cart" @click="addCart">
          <div class="r-text">加入购物车</div>
        </div>
        <div class="r-box r-buy">
          <router-link to="/address">
            <div class="r-text">立即购买</div>
          </router-link>
        </div>
      </div>
    </div>
    <wait v-if="iswait"></wait>
    <div  class="result true" v-if="isshow">
        <div class="box">
            <div>已加入购物车</div>
        </div>
    </div>
    <!-- {{detail.DetailList}} -->
    <!-- {{detail.goods_list}} -->
    <!-- {{detail.goods_info}} -->
  </div>
</template>
<script>
import { get } from "@/utils/http";
import { mapState } from "vuex";
import { Carousel, CarouselItem } from "element-ui";
import Vue from "vue";
import $ from "jquery";
import wait from "@/components/wait";
Vue.use(Carousel);
Vue.use(CarouselItem);
export default {
  data() {
    return {
        //   img: [
    //     {
    //       src: "http://47.115.51.185//uploads/attach/2021/06/20210626/0265a3cb5dd2492e3fc8a4293361bf8e.jpg",
    //       id: 1,
    //     },
    //     {
    //       src: "http://47.115.51.185//uploads/attach/2021/06/20210626/0265a3cb5dd2492e3fc8a4293361bf8e.jpg",
    //       id: 2,
    //     },
    //     {
    //       src: "http://47.115.51.185//uploads/attach/2021/06/20210626/0265a3cb5dd2492e3fc8a4293361bf8e.jpg",
    //       id: 3,
    //     },
    //     {
    //       src: "http://47.115.51.185//uploads/attach/2021/06/20210626/0265a3cb5dd2492e3fc8a4293361bf8e.jpg",
    //       id: 4,
    //     },
    //     {
    //       src: "http://47.115.51.185//uploads/attach/2021/06/20210626/0265a3cb5dd2492e3fc8a4293361bf8e.jpg",
    //       id: 5,
    //     },
    //   ],
      flag: 0,
      iscollect: false,
      iswait : true,
      isshow : false,
    };
  },
  methods: {
      go(){
        //   console.log(ID)
        // this.init(ID);
        location.reload();
      },
      collect(){
        if(localStorage.getItem('token_user') == null){
            window.location.href="#/login";
        }
        this.iscollect = !this.iscollect;
      },
    init(id) {
      // console.log(id)
      get(`/api/product/detail/${id}`).then((response) => {
        let res = response.data;
        // console.log(res)
        if (res.status == 200) {
          let data = res.data;
          this.$store.dispatch("detail/setDetailAsync", data);
          this.$store.dispatch("detail/setgoodsAsync", data.good_list);
          this.$store.dispatch("detail/setInfoAsync", data.storeInfo);
          this.iswait = false;
        //   console.log(data);
        let timeout = setTimeout(() => {
            // console.log($('.detail').children())
            //   console.log($('.productDetail>.text').html())
            // console.log(this.$store.state.detail.goods_info.description)
            this.$store.state.detail.goods_info.description = this.$store.state.detail.goods_info.description.replaceAll('790px',"100%")
            $('.productDetail>.text').html(this.$store.state.detail.goods_info.description)
            // $('#J_DcTopRightWrap').width(320)
            // console.log(window.innerWidth)
            // console.log($('.productDetail>.text img'))
            $('.productDetail>.text img').width(window.innerWidth)
            
        }, 500);
        
        }
      });
    },
    dosomething: function (e) {
        e.currentTarget.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F37%2F92%2F40573c69065b76e.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647747238&t=e2ac665f666780d32ec1e60b4ceb233f"
      },
    addCart(){
      if(localStorage.getItem('token_user') == null){
            window.location.href="#/login";
            return;
      }
      let str = localStorage.getItem('cartId')
      if(str == null){
        str = this.$route.query.id;
      }else{
        str += ','+this.$route.query.id;
      }
      localStorage.setItem('cartId',str);
      this.isshow = true;
      let timeout = setTimeout(() => {
          this.isshow = false;
      },1000);
      // let arr = this.$store.state.cart.cartList;
      // arr.push(this.$route.query.id);
      // arr = [...new Set(arr)];
      // this.$store.dispatch("cart/setcartAsync",arr);
    },
    topClick() {},
  },
  watch: {
    flag(value) {
      // console.log(value);
      let arr = [
        0,
        $(".common")[0].offsetTop - $(".fixTop")[0].offsetHeight,
        $(".recommand")[0].offsetTop - $(".fixTop")[0].offsetHeight,
        $(".productDetail")[0].offsetTop - $(".fixTop")[0].offsetHeight,
      ];
      // console.log($('.fixTop')[0].offsetHeight)
      $("body,html").animate(
        {
          scrollTop: arr[value],
        },
        500
      );
    },
  },
  computed: {
    ...mapState(["detail"]),
  },
  components:{
    wait,
  },
  created() {
    this.init(this.$route.query.id);
  },
  mounted() {
    window.onscroll = function (e) {
      // console.log(this.scrollY)
      let Ytop = this.scrollY;
      // console.log($('.fixTop')[0])
      if ($(".fixTop")[0] != undefined) {
        $(".fixTop").css({
          opacity:
            Ytop / ($(".common")[0].offsetTop - $(".fixTop")[0].offsetHeight),
        });
      }
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
@import "../../assets/font/font_icon/iconfont.css";
@import "../../assets/font/font_icon3/iconfont.css";
.detail {
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 100%;
  background: #f5f5f5;
  z-index: 1002;
  font-size: 18px;
  img {
    width: 100%;
  }
  .fixTop {
    position: fixed;
    top: 0;
    z-index: 1002;
    background: white;
    display: flex;
    width: 100%;
    padding: 0px 30px;
    box-sizing: border-box;
    justify-content: center;
    opacity: 0;
    border-bottom: 1px solid #ccc;
    .ft-item {
      flex-basis: 25%;
      padding: 15px;
      > div {
        text-align: center;
        height: 100%;
      }
    }
    .ft-item.active {
      > div {
        border-bottom: 2px solid @color4;
      }
    }
  }
  .d-top {
    width: 100%;
    overflow: hidden;
    background: white;
    .img {
      width: 100%;
      .bigBox {
        width: 100%;
        img {
          width: 100%;
        }
      }
    }
    .text {
      padding: 10px;
      box-sizing: border-box;
      .t-price {
        .pp-price {
          color: red;
          font-size: 22px;
          font-weight: bold;
        }
        .vip-price {
          display: inline-block;
          margin: 0 10px;
          font-size: 16px;
        }
        img {
          width: 26px;
        }
      }
      .t-title {
        margin: 10px 0;
        font-weight: bold;
      }
      .t-description {
        display: flex;
        font-size: 14px;
        color: gray;
        justify-content: space-between;
      }
    }
  }
  .common {
    background: white;
    margin: 10px 0;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    .c-go {
      .c-n {
        color: @color4;
        font-size: 15px;
      }
      .c-g {
        color: gray;
        display: inline-block;
        margin: 0 2px;
      }
    }
  }
  .recommand {
    background: white;
    padding-bottom: 10px;
    .r-title {
      padding: 20px;
      text-align: center;
      color: @color4;
    }
    .r-content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 10px;
      .c-item {
        flex-basis: 30%;
        width: 30%;
        margin-bottom: 10px;
        .c-item-img {
          width: 100%;
          img {
            width: 100%;
            height: 100px;
            border-radius: 10px;
          }
        }
        .c-item-title {
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin: 2px 0;
        }
        .c-item-price {
          color: red;
          font-size: 12px;
        }
      }
    }
  }
  .productDetail {
    margin: 10px 0 100px;
    .title {
      background: white;
      padding: 10px;
      text-align: center;
      font-size: 16px;
    }
    .text {
      padding: 15px 0px 0;
      overflow: hidden;
      p {
        font-size: 14px;
        margin-bottom: 15px;
        color: grey;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      img{
          width: 100%;
      }
    }
    .img {
      .img-first {
        margin-bottom: 10px;
      }
      img {
        display: block;
      }
    }
    .endText {
      padding: 40px 10px;
      font-size: 20px;
      text-align: center;
    }
  }
  .fixBottom {
    position: fixed;
    bottom: 0;
    height: 40px;
    display: flex;
    background: white;
    width: 100%;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px solid #ccc;
    .fb-left {
      display: flex;
      flex-basis: 30%;
      padding-left: 10px;
      .l-box {
        margin: 0 10px;
        color: #666666;
        .l-box-img {
          height: 28px;
          .iconfont {
            font-size: 28px;
          }
          img {
            width: 28px;
            height: 100%;
          }
        }
        .l-box-text {
          font-size: 14px;
          color: #666666;
        }
      }
    }
    .fb-right {
      flex-basis: 60%;
      display: flex;
      padding-right: 10px;
      .r-box {
        .r-text {
          height: 40px;
          line-height: 40px;
          padding: 0px 20px;
          box-sizing: border-box;
          color: white;
          font-size: 15px;
        }
      }
      .r-cart {
        .r-text {
          background: orange;
          border-top-left-radius: 20px;
          border-bottom-left-radius: 20px;
        }
      }
      .r-buy {
        .r-text {
          background: #ec3b20;
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
        }
      }
    }
  }
  .result{
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 1003;
      top: 0;
      .box{
        height: 100%;
        position: relative;
        >div{
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          margin: auto;
          width: 120px;
          padding: 0 10px;
          height: 40px;
          font-size: 14px;
          z-index: 103;
          line-height: 40px;
          text-align: center;
          background: rgba(0, 0, 0, 0.3);
        }
      }
    }
    .true{
      .box{
        >div{
          background: white;
          border: 1px solid #ccc;
          color : @color4;
        }
      }
    }
}
</style>
